<template>
  <div class="video-style" v-if="store.videoInfoUrl.video && store.videoInfoUrl.video.url">
    <div class="close-box" @click.stop="close" :class="{ 'close-box-wap': store.isMobileType }">
      <i class="doorIcon">&#xe63d;</i>
    </div> 
    <video  
    playsinline  
      controls
      :poster="urls + store.videoInfoUrl.video.url + '?ci-process=snapshot&time=2&format=jpg'"
      class="outline-cover"
      :src="urls + store.videoInfoUrl.video.url"
      ref="videoRef"
    ></video>  
  </div>
</template>
 
<script lang="ts">
export default defineComponent({
  name: 'style2',
});
</script>

<script setup lang="ts">
import { urls } from '@/utils/request/upload';
import { defineComponent, ref, watch } from 'vue';
import { useProjectStore } from '@/store';

const videoRef = ref(null);
const store = useProjectStore();

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});

const videoplay = () => {
  if (videoRef.value) {
    videoRef.value.load();
    setTimeout(() => {
      if (store.videoInfoShow) {
        videoRef.value.play();
      } else {
        videoRef.value.pause();
      }
    }, 100);
  }
};

// 关闭弹窗
const close = () => {
  store.videoInfoShow = false;
  videoplay();
};

// 弹窗开启播放视频
watch(
  () => store.videoInfoShow,
  () => {
    videoplay();
  },
);
</script> 

<style scoped lang="less">
.video-style {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 1152px;
  max-width: 1200px;
  height: 624px;
  background: transparent;
  position: relative;
  transform: translateZ(0px);
  // background: #f2e9d8;
  video {
    width: 1152px;
    max-width: 1200px;
    height: 624px;
    border: 8px solid #99b9b6;
    border-radius: 4px;
    object-fit: cover;
  }
  .close-box {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -30px;
    right: 0;
    width: auto;
    height: 30px;
    border-radius: 50%;
    z-index: 30;
    .doorIcon {
      font-size: 18px;
      color: #fff;
      line-height: 18px;
    }
  }
  .close-box-wap {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -46px;
    right: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    z-index: 300;
    .doorIcon {
      font-size: 28px;
      color: #fff;
      line-height: 28px;
    }
  }
}
</style>